<template>
  <!-- 展示全部订单的结构 -->
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>挂号订单</span>
      </div>
    </template>
    <!-- 用户选择的下拉菜单 -->
    <el-form :inline="true">
      <el-form-item label="就诊人">
        <el-select placeholder="请选择就诊人" style="width: 200px;" v-model="patientId" @change="changeUser">
          <el-option label="请选择全部就诊人" :value="''"></el-option>
          <el-option v-for="user in allUser" :key="user.id" :label="user.name" :value="user.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select placeholder="请选择订单状态" style="width: 200px;" v-model="orderStatus" @change="changeOrderState">
          <el-option label="请选择全部订单" :value="''"></el-option>
          <el-option v-for="(orderState, index) in allOrderState" :key="index" :label="orderState.comment"
            :value="orderState.status"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <!-- 表格展示订单的数据 -->
    <el-table border style="margin: 10px 0;" :data="userOrderArr">
      <el-table-column label="就诊时间" prop="reserveDate"></el-table-column>
      <el-table-column label="医院" prop="hosname"></el-table-column>
      <el-table-column label="科室" prop="depname"></el-table-column>
      <el-table-column label="医生" prop="title"></el-table-column>
      <el-table-column label="服务费" prop="amount"></el-table-column>
      <el-table-column label="就诊人" prop="patientName"></el-table-column>
      <el-table-column label="订单状态" prop="param.orderStatusString"></el-table-column>
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button type="text" @click="goDetail(row)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <!-- eslint-disable -->
    <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 40]"
      :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="userOrderTotal"
      :current-change="getUserOrder" :size-change="handler" />
    <!-- eslint-disable -->
  </el-card>
</template>

<script setup lang="ts" name="AllOrder">
//引入组合式API
import { ref, onMounted } from 'vue'
//引入获取订单数据的请求方法和ts类型约束
//@ts-ignore
import { reqUserOrder, reqAllUser, reqAllOrderState } from '@/api/user'
//@ts-ignore
import type { UserOrderResponseData, UserOrderArr, UserOrder, AllUserResponseData, AllUser, AllOrderStateResponseData, AllOrderState } from '@/api/user/type'
//引入路由器对象
import { useRouter } from 'vue-router'

//当前页面
let pageNo = ref<number>(1)
//当前每页展示的条数
let pageSize = ref<number>(10)
//就诊人id
let patientId = ref<string>('')
//订单状态
let orderStatus = ref<string>('')
//用户订单数组
let userOrderArr = ref<UserOrderArr>([] as UserOrderArr)
//用户订单总个数
let userOrderTotal = ref<number>(0)
//路由器
let $router = useRouter()
//所有就诊人信息
let allUser = ref<AllUser>([] as AllUser)
//所有订单状态信息
let allOrderState = ref<AllOrderState>([] as AllOrderState)

//请求用户订单数据的方法
const getUserOrder = async (pager: number = 1) => {
  //写入新的页码
  pageNo.value = pager
  //发送请求获取用户订单数据
  let result: UserOrderResponseData = await reqUserOrder(pageNo.value, pageSize.value, patientId.value, orderStatus.value)
  if (result.code == 200) {
    userOrderArr.value = result.data.records
    userOrderTotal.value = result.data.total
  }
}
//请求所有就诊人信息和所有状态信息的方法
const getAllUserAndAllOrderState = async () => {
  //发送请求获取所有就诊人信息
  let result1: AllUserResponseData = await reqAllUser()
  //发送请求获得所有订单状态信息
  let result2: AllOrderStateResponseData = await reqAllOrderState()
  if (result1.code == 1 && result2.code == 1) {
    allUser.value = result1.data
    allOrderState.value = result2.data
  }
}
//组件挂载完毕：
onMounted(() => {
  // 发送请求获取用户订单数据
  getUserOrder()
  //发送请求获取全部就诊人 全部订单状态
  getAllUserAndAllOrderState()
})
//点击详情按钮的回调
const goDetail = (userOrder: UserOrder) => {
  $router.push({
    path: '/user/order',
    query: {
      orderId: userOrder.id
    }
  })
}
//每页显示条数发生变化时的回调
const handler = (pagesize: number) => {
  //更新每页显示条数
  pageSize.value = pagesize
  //重新发送请求获取用户订单数据
  getUserOrder()
}
//就诊人下拉菜单选中值发生改变的回调
const changeUser = () => {
  //因为就诊人id发生改变（v-modal双向绑定了），需要重新发送请求获取用户订单数据
  getUserOrder()
}
//订单状态下拉菜单选中值发生改变的回调
const changeOrderState = () => {
  //因为订单状态发生改变（v-modal双向绑定了），需要重新发送请求获取用户订单数据
  getUserOrder()
}
</script>

<style scoped lang="scss"></style>